<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#t1 + div + div + #r1,
#t2 + div + div + #r2,
#t3 + div + div + #r3 { background-color: rgb(0, 128, 0); }
</style>
<div>
    <div id="t1"></div>
    <div id="i1"></div>
    <div id="r1"></div>
    <div></div>
</div>
<div>
    <div id="i2"></div>
    <div></div>
    <div id="r2"></div>
    <div></div>
</div>
<div>
    <div id="t3"></div>
    <div></div>
    <div id="d3"></div>
    <div></div>
    <div id="r3"></div>
    <div></div>
</div>
<script>
'use strict';
document.body.offsetTop;

test(function() {
    assert_true(!!window.internals, "This test only works with internals exposed present");
}, "internals are exposed");

test(function() {
    var i1 = document.getElementById('i1');
    var r1 = document.getElementById('r1');
    assert_equals(getComputedStyle(r1).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    i1.parentNode.insertBefore(document.createElement('div'), i1);
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Inserted div plus #r1 recalculated");
    assert_equals(getComputedStyle(r1).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Insert between siblings");

test(function() {
    var i2 = document.getElementById('i2');
    var r2 = document.getElementById('r2');
    assert_equals(getComputedStyle(r2).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");

    var t2 = document.createElement('div');
    t2.id = 't2';
    i2.parentNode.insertBefore(t2, i2);
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Inserted div plus #r2 recalculated");
    assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Insert before siblings");

test(function() {
    var d3 = document.getElementById('d3');
    var r3 = document.getElementById('r3');

    d3.parentNode.removeChild(d3);
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "#r3 recalculated");
    assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
}, "Remove between siblings");

</script>
